//获取名字
let fname = document.getElementById('fname')
let span1 = fname.nextElementSibling
//获取姓氏
let lname = document.getElementById('lname')
let span2 = lname.nextElementSibling

//获取密码
let pass = document.getElementById('pass')
let span3 = pass.nextElementSibling

//获取邮箱
let email = document.getElementById('email')
let span4 = email.nextElementSibling

//再次输入密码
let rpass = document.getElementById('rpass')
let span5 = rpass.nextElementSibling

//获取登录名
let sname = document.getElementById('sname')
let span6 = sname.nextElementSibling

span1.innerHTML = ''
span2.innerHTML = ''
let flag = true

//判断名字是否为空，是否有数字
fname.onfocus = function () {
    span1.innerHTML = ''
}
fname.onblur = function () {
    let reg = /^[\u4e00-\u9fa5]+$/
    flag = reg.test(fname.value)
    if (!flag) {
        span1.innerHTML = '请输入正确的名字'
        span1.style.color = 'red'
        return
    }
    span1.innerHTML = '名字正确'
    span1.style.color = 'green'
}
//判断姓氏是否为空，是否有数字
lname.onfocus = function () {
    span2.innerHTML = ''
}
lname.onblur = function () {
    let reg = /^[\u4e00-\u9fa5]+$/
    flag = reg.test(lname.value)
    console.log(flag);
    if (!flag) {
        span2.innerHTML = '请输入正确的姓氏'
        span2.style.color = 'red'
        return
    }
    span2.innerHTML = '名字正确'
    span2.style.color = 'green'
}
//密码不能为空、不能少于6位
pass.onfocus = function () {
    span3.innerHTML = '（至少包含 6 个字符）'
    span3.style.color = 'black'
}
pass.onblur = function () {
    let reg = /^[\S]{6,15}$/
    flag = reg.test(pass.value)
    console.log(flag);
    if (!flag) {
        span3.innerHTML = '请输入正确的密码'
        span3.style.color = 'red'
        return
    }
    span3.innerHTML = '密码正确'
    span3.style.color = 'green'
}

//判断登录名
sname.onfocus = function () {
    span6.innerHTML = '（可包含 a-z、0-9 和下划线）'
    span6.style.color = 'black'
}
sname.onblur = function () {
    let reg = /^[\w]+$/
    flag = reg.test(sname.value)
    if (!flag) {
        span6.innerHTML = '请输入正确的登录名'
        span6.style.color = 'red'
        return
    }
    span6.innerHTML = '登录名正确'
    span6.style.color = 'green'
}
//判断再次输入密码
rpass.onfocus = function () {
    span5.innerHTML = ''
}
rpass.onblur = function () {
    if (!rpass.value) {
        span5.innerHTML = "重复密码不能为空"
        span5.style.color = "red"
        return
    }
    if (rpass.value !== pass.value) {
        span5.innerHTML = "重复密码输入不正确"
        span5.style.color = "red"
        return
    }
    span5.innerHTML = "重复密码正确"
    span5.style.color = "green"
}

//判断邮箱
email.onfocus = function () {
    span4.innerHTML = '（必须包含 @ 和.字符）'
    span4.style.color = 'black'
}
email.onblur = function () {
    let reg = /^[a-zA-Z0-9]+@[a-zA-Z0-9]{2,}(\.com|\.cn|\.com\.cn|\.org|\.net|\.edu)$/
    flag = reg.test(email.value)
    if (!flag) {
        span4.innerHTML = '请输入正确的邮箱'
        span4.style.color = 'red'
        return
    }
    span4.innerHTML = '邮箱正确'
    span4.style.color = 'green'
}